<template>
  <div class="general">
    <div class="general_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">费用返现<i class="el-icon-close"></i></div>
    </div>
    <!-- <div
      class="selectBox"
      style="display: flex; justify-content: space-between;"
    >
      <div class="selectBtn">
        日期查询
        <el-date-picker
          style="margin: 0 20px 0 10px"
          v-model="valueTime"
          type="datetimerange"
          @change="selectTime"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        >
        </el-date-picker>
        提现类型
        <el-select
          v-model="valueType"
          @change="selectType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="display: flex">
        <el-input
          style="width: 100%"
          type="text"
          v-model="input"
          placeholder="请输入相关信息搜索"
        ></el-input>
        <el-button type="primary" size="small" @click="toSearchBtn"
          >搜索</el-button
        >
      </div>
    </div> -->
    <div class="table" style=" margin-top: 20px">
      <div class="partnerList_table">
        <div class="partnerList_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>用户</th>
              <th>手机号</th>
              <th>上月提现金额</th>
              <th>上月手续费</th>
              <th>本月提现金额</th>
              <th>本月手续费</th>
              <th>已返手续费金额</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>
                <font
                  class="checkbox"
                  :class="{ check_active: checkBoxAll.includes(i) }"
                  @click="handlerCheckbox(i)"
                  ><i class="el-icon-check"></i
                ></font>
              </td>
              <td>{{ i + 1 + (page - 1) * pagesize }}</td>
              <td>{{ v.username }}</td>
              <td>{{ v.mobile }}</td>
              <td>{{ v.lastTotal }}</td>
              <td>{{ v.lastFee }}</td>
              <td>{{ v.thisTotal }}</td>
              <td>{{ v.thisFee }}</td>
              <td>{{ v.refundTotalFee }}</td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="13">当前数据空空如也</td>
            </tr>
          </table>
          <div class="partnerList_bottom_page">
            <div class="partnerList_bottom_page_left">
              <div
                class="partnerList_bottom_page_left_checkAll"
                @click="handerCheckAll"
              >
                <font class="checkbox" :class="{ check_active: checkAll }"
                  ><i class="el-icon-check"></i
                ></font>
              </div>
              全选
              <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
            </div>
            <div class="partnerList_bottom_page_right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[15, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navIndex: 0,
      valueTime: [], //时间选择
      input: "",
      tableList: [],
      page: 1,
      pagesize: 15,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      checkAll: false,
      valueType: 0, //选择类型
      options: [
        {
          //订单类型
          name: "全部",
          value: 0,
        },
        {
          name: "商家提现",
          value: 1,
        },
        {
          name: "设计师提现",
          value: 2,
        },
        {
          name: "施工队提现",
          value: 3,
        },
        {
          name: "创业主提现",
          value: 4,
        },
        {
          name: "创业精英提现",
          value: 5,
        },
        {
          name: "导购提现",
          value: 6,
        },
      ],
      freeInfo: {},
      startDate: "",
      endDate: "",
    };
  },
  mounted() {
    this.getCashOutFree();
  },
  methods: {
    changeNav(index) {
      this.navIndex = index;
      console.log(index, "navIndex");
    },

    // 提现手续费列表
    getCashOutFree() {
      let params = {
        // role: this.valueType,
        // keyword: this.input,
        // sta_date: this.startDate,
        // end_date: this.endDate,
        page: this.page,
        pagesize: this.pagesize,
      };
      this.$http.post("/api/root/Cashout/refundFeeList", params).then((res) => {
        console.log(res, "手续费统计列表");
        if (res.code == 1) {
          this.freeInfo = res.data ? res.data : {};
          this.tableList = res.data.list
          this.total = res.data.total;
        }
      });
    },

    // 时间选择
    selectTime() {
      this.startDate = this.valueTime
        ? this.$moment(this.valueTime[0]).format("yyyy-MM-DD")
        : "";
      this.endDate = this.valueTime
        ? this.$moment(this.valueTime[1]).format("yyyy-MM-DD")
        : "";
      this.getCashOutFree();
    },

    // 类型选择
    selectType() {
      this.getCashOutFree();
    },

    // 搜索按钮
    toSearchBtn() {
      this.getCashOutFree();
    },

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    handleSizeChange(val) {
      this.pagesize = val;
      this.page = 1
      this.getCashOutFree();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getCashOutFree();
    },
  },
};
</script>

<style lang="less">
@import "index.less";
@import "../iconfont.less";
</style>


